import * as React from "react";
import {
  createBottomTabNavigator,
  createStackNavigator
} from "react-navigation";
import Icon from "react-native-vector-icons/FontAwesome";
import { TouchableOpacity, Text, StyleSheet, View } from "react-native";
import NavigationService from "../Service/NavigationService";
import { Badge } from "react-native-elements";

import Home from "../Home";
import HomeDetail from "../HomeDetail";

import Setting from "../Setting";
import SettingDetail from "../SettingDetail";
import UserInfoDetail from "../UserInfoDetail";
import MyWebView from "./MyWebView";

const HomeStack = createStackNavigator(
  {
    Home: Home,
    Detail: HomeDetail
  },
  {
    initialRouteName: "Home",
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "tomato"
      },
      headerTintColor: "#FFF",
      headerLeft: (
        <TouchableOpacity onPress={() => NavigationService.pop()}>
          <Icon
            style={{ marginLeft: 20, marginTop: -4 }}
            name="angle-left"
            size={30}
            color="white"
          />
        </TouchableOpacity>
      )
    }
  }
);

HomeStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible: boolean = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }
  return {
    tabBarVisible
  };
};

const SettingStack = createStackNavigator(
  {
    Setting: Setting,
    Detail: SettingDetail,
    UserInfoDetail: UserInfoDetail,
    MyWebView: MyWebView
  },
  {
    initialRouteName: "Setting",
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "tomato"
      },
      headerTintColor: "#FFF",
      headerLeft: (
        <TouchableOpacity onPress={() => NavigationService.pop()}>
          <Icon
            style={{ marginLeft: 20, marginTop: -4 }}
            name="angle-left"
            size={30}
            color="white"
          />
        </TouchableOpacity>
      )
    }
  }
);

SettingStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible: boolean = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }
  return {
    tabBarVisible
  };
};

let isClickedSetting: boolean = false;

const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeStack,
    Setting: SettingStack
  },
  // BottomTabNavigatorConfig
  {
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray",
      style: {
        backgroundColor: "white",
        borderTopColor: "#efefef",
        borderTopWidth: 0.5
      }
    },

    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        if (routeName === "Home") {
          if (focused === true) {
            return <Icon name="home" size={24} color="tomato" />;
          } else {
            return <Icon name="home" size={24} color="gray" />;
          }
        } else {
          if (focused === true) {
            return <Icon name="cog" size={24} color="tomato" />;
          } else {
            if (isClickedSetting === true) {
              return <Icon name="cog" size={24} color="gray" />;
            } else {
              isClickedSetting = true;
              return (
                <View>
                  <Icon name="cog" size={24} color="gray" />
                  <Badge
                    status="error"
                    containerStyle={{
                      position: "absolute",
                      right: -4
                    }}
                  />
                </View>
              );
            }
          }
        }
      },
      tabBarLabel: ({ focused }) => {
        const { routeName } = navigation.state;
        if (routeName === "Home") {
          if (focused === true) {
            return (
              <Text style={[{ color: "tomato" }, styles.textStyle]}>主页</Text>
            );
          } else {
            return (
              <Text style={[{ color: "gray" }, styles.textStyle]}>主页</Text>
            );
          }
        } else {
          if (focused === true) {
            return (
              <Text style={[{ color: "tomato" }, styles.textStyle]}>设置</Text>
            );
          } else {
            return (
              <Text style={[{ color: "gray" }, styles.textStyle]}>设置</Text>
            );
          }
        }
      }
    })
  }
);

const styles = StyleSheet.create({
  textStyle: {
    fontSize: 12,
    marginBottom: 4,
    textAlign: "center"
  }
});

export default TabNavigator;
